<template>
  <div class="pages">
    <!-- <div class="pageLevel" v-if="!sub"> -->
    <!-- 头部 -->
    <div class="head">
      <div class="head-title">
        广告位置
        <el-tag :type="bannerType" @click="getBannerList">首页banner图</el-tag>
        <el-tag :type="classType" @click="getClassList">TV视频</el-tag>
      </div>
      <div class="head-search">
        <el-input class="input" v-model="keyword" size="small" placeholder="请输入广告标题" clearable></el-input>
        <el-button type="primary" icon="el-icon-search" size="small" @click="searchSelect" :disabled="dis" class="Button">查询</el-button>
      </div>
      <div class="head-add">
        <el-button type="primary" :disabled="dis" @click=" routerPush('0', '')" size="mini" v-if="setRole('新增广告')">新增广告</el-button>
        <!--  -->
      </div>
    </div>
    <div class="list-body">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <template v-for="(item,index) in tabsList">
          <el-tab-pane :label="item.label" :name="item.name" :key="index">
            <listtable :tableDataList="tableDataList" :TVvideo="TVvideo" :operateShow="operateShow" :pageSize="pageSize" :pageNum="pageNum" v-on:listDataFN="listdata"></listtable>
          </el-tab-pane>
        </template>
      </el-tabs>
      <div class="pageblock">
        <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="['5','10','15',20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import util from "@/util";
import listtable from "./advertisement-list-table";
import {
  queryAdv, // 查询广告
  uploadFile,
  getFile
} from "@/api";
import { mapState } from "vuex";
export default {
  computed: mapState(["sub", "power", "merchantId"]),
  data() {
    return {
      bannerType: "",
      classType: "info",
      listPosition: 0,
      listStatus: 1,
      operateShow: true,
      TVvideo: false,
      keyword: "",
      dis: false,
      activeName: "running",
      tableDataList: [],
      tabsList: [
        {
          name: "running",
          label: "进行中"
        },
        {
          name: "unStart",
          label: "未开始"
        },
        {
          name: "closing",
          label: "已下架"
        }
      ],
      total: 0,
      pageSize: 20,
      totalItems: 0,
      currentPage: 1,
      pageNum: 0
    };
  },
  created() {
    this.getListData(
      this.merchantId,
      0,
      1,
      "",
      this.currentPage,
      this.pageSize
    );
  },
  mounted() {},
  components: {
    listtable: listtable
  },

  methods: {
    setRole(key) {
      return util.selectTitle(this.power, key);
    },

    getBannerList() {
      this.TVvideo = false;
      this.bannerType = "";
      this.classType = "info";
      this.listPosition = 0;
      this.getListData(
        this.merchantId,
        this.listPosition,
        this.listStatus,
        this.keyword,
        1,
        this.pageSize
      );
    },
    getClassList() {
      this.TVvideo = true;
      this.bannerType = "info";
      this.classType = "";
      this.listPosition = 2;
      this.getListData(
        this.merchantId,
        this.listPosition,
        this.listStatus,
        this.keyword,
        1,
        this.pageSize
      );
    },
    listdata(param) {
      this.getListData(
        this.merchantId,
        this.listPosition,
        this.listStatus,
        this.keyword,
        1,
        this.pageSize
      );
    },

    handleClick(type, event) {
      switch (type.name) {
        case "unStart":
          this.listStatus = 0;
          this.unStartListClick();
          break;
        case "running":
          this.listStatus = 1;
          this.runningListClick();
          break;
        case "closing":
          this.listStatus = 2;
          this.closingListClick();
          break;
      }
    },
    getListData(companyId, position, status, title, pageNum, pageSize) {
      let appId = 1;
      if (position == "2") {
        appId = 2;
      }
      let data = {
        companyId: companyId,
        position: position,
        status: status,
        title: title,
        pageNum: pageNum,
        pageSize: pageSize,
        appId: appId //(0:会员app,1:婴联通)',
      };
      queryAdv(data).then(res => {
        this.tableDataList = res.data.list;
        this.totalItems = res.data.totalRecord;
      });
    },

    unStartListClick() {
      this.operateShow = false;
      this.getListData(
        this.merchantId,
        this.listPosition,
        0,
        this.keyword,
        this.currentPage,
        this.pageSize
      );
    },

    runningListClick() {
      this.operateShow = true;
      this.getListData(
        this.merchantId,
        this.listPosition,
        1,
        this.keyword,
        this.currentPage,
        this.pageSize
      );
    },

    closingListClick() {
      this.operateShow = false;
      this.getListData(
        this.merchantId,
        this.listPosition,
        2,
        this.keyword,
        this.currentPage,
        this.pageSize
      );
    },

    searchSelect() {
      this.getListData(
        this.merchantId,
        this.listPosition,
        this.listStatus,
        this.keyword,
        this.currentPage,
        this.pageSize
      );
    },

    toPage() {
      this.getListData(
        this.merchantId,
        this.listPosition,
        this.listStatus,
        this.keyword,
        this.currentPage,
        this.pageSize
      );
      this.pageNum = this.currentPage - 1;
    },

    routerPush(status, id) {
      util.routerTo(
        "/app-management/yingliantong-management/advertisement-add",
        {
          status: status,
          id: id
        }
      );
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = this.currentPage - 1;
      this.getListData(
        this.merchantId,
        this.listPosition,
        this.listStatus,
        this.keyword,
        this.currentPage,
        this.pageSize
      );
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.pageNum = this.currentPage - 1;
      this.getListData(
        this.merchantId,
        this.listPosition,
        this.listStatus,
        this.keyword,
        this.currentPage,
        this.pageSize
      );
    }
  }
};
</script>
<style lang="less" scoped>
.pages {
  padding: 20px 40px;
  .head {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30px;
    .head-title {
      width: 280px;
      display: flex;
      justify-content: space-between;
      line-height: 30px;
    }
    .head-search {
      display: flex;
      justify-content: space-between;
    }
  }
}
.el-tag {
  cursor: pointer;
}
.Button {
  margin-left: 10px;
}
</style>


